<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../res/css/weui.css"/>
    <link rel="stylesheet" href="../res/css/weuix.css"/>
    <link rel="stylesheet" href="../res/css/common.css"/>
    <script src="../res/js/zepto.min.js"></script>
    <script src="../res/js/zepto.weui.js"></script> 
    <script src="../res/js/common.js?v=2"></script>
<style>
	a {
	    color: #1189ff;
	}
	.argeeContent{height:cal(100vh-40px); overflow:auto}
	#code{display: contents;}
	.cd{
		touch-action: none; 
		width: 104px;
		height: 30px;
		border-radius: 30px;
		border: 1px solid #fc761f;
		color: #fc761f;
		background: #ffffff;
		float: right;
		margin-top: 10px;
	}
	.cd_pic{
		float: right;
		width: 104px;
		height: 40px;
		margin-top: 5px;
	}
	.disappear{display: none;}
	.weui-cell {
		display: block;
		position: relative;
		padding: 10px 15px;
	}
	.weui-btn_primary {
	    background-color: #1189ff;
	}
	.weui-header .weui-header-title{
		color: #FFFFFF;
	}
	.weui-btn_primary:not(.weui-btn_disabled):active {
	    color: rgba(255, 255, 255, 0.6);
	    background-color: #1189ff;
	}
	.weui-cell__bd{
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #E0E0E0;
		position: relative;
	}
	.placeholder{
		background-image: url('https://yixiang-hospital.oss-cn-shenzhen.aliyuncs.com/mini/minImg/img_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
	}
	.placeholder img:first-child{
		margin:0 auto;
		width: 40%;
		height: 30%;
		margin-top: 60px;
	}
	.placeholder img:last-child{
		margin:0 auto;
		width: 50%;
		height: 75%;
		margin-top: 25px;
	}
	.left_img{
		width: 20px;
		height: 18px;
		display: inline-block;
		vertical-align: middle;
		z-index: 1;
	}
	.weui-input {
	    padding-left: 10px;
	    width: 80%;
	}

	.flex-row{
		display: flex;
		align-items: center;
	}
	.weui-btn.get-code{
		width: unset;
		flex-grow: 0;
		font-size: 16px;
		line-height: 36px;
		margin-right: 0;
		color: #fff;
	}
	.notClickn {
		pointer-events: none;
		opacity: 0.5;
	}
	.cell-agree{
		margin-top: 10px;
		font-size: 14px;
	}
	#agreementTitle{
		color: #1189ff;
	}
	.togglePsw{
		width: 21px;
		height: 16px;
		display: none;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	.togglePsw.eye-open{
		height: 27px;
	}
</style>
</head>

<body ontouchstart>
	<div class="fixed-top">
		<div class="weui-header weui-btn_primary"> 
			<div class="weui-header-left"><a id="btnBack" onclick="goPage('login.htm');" class="icon icon-109 f-white"></a></div>
			<div class="weui-header-title">用户注册</div>
			<div class="weui-header-right"></div>
		</div>
	</div>
	<div class="weui-cells weui-cells_form" style="margin-top:0px;">
		<div class="weui-flex">
			<div class="weui-flex__item">
				<div class="placeholder">
					<img src="https://yixiang-hospital.oss-cn-shenzhen.aliyuncs.com/mini/minImg/img_hello@3x.png" class="img-max" >
					<img src="https://yixiang-hospital.oss-cn-shenzhen.aliyuncs.com/mini/minImg/img_doctor.png" class="img-max">
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<img src="../res/images/icon_user.png" class="left_img" >
				<input class="weui-input" placeholder="请输入手机号码" required id="txt_phone" type="tel" maxlength="11"  oninput="check()">
			</div>
			<div class="weui-cell__bd flex-row">
				<img src="../res/images/img_verification_code.png" class="left_img" >
				&nbsp;
				<input class="weui-input" placeholder="请输入验证码" style="width: 35%;" required id="phone_code">
				<!-- <div id="code"> -->
					<div class="weui-btn weui-btn_primary get-code" onclick="get_captcha()" id="v_container">获取验证码</div>
					<!-- <img class="cd_pic disappear" id="codeImg" onclick="dogetCodeAgain()" src=""/> -->
				<!-- </div> -->
				<!-- <button  class=" cd" onclick="dogetSend()" >发送验证码</button> -->
			</div>
			<div class="weui-cell__bd">
				<img src="../res/images/icon_password.png" class="left_img" >
				<input class="weui-input" placeholder="请输入6~20个字符的密码" required id="txt_paw" type="password">
				<img src="" alt="" class="togglePsw" data-index="0">
			</div>
			<div class="weui-cell__bd">
				<img src="../res/images/icon_password.png" class="left_img" >
				<input class="weui-input" placeholder="请再次输入密码" required id="txt_paw2" type="password">
				<img src="" alt="" class="togglePsw" data-index="1">
			</div>
			<div class="cell-agree" id="agreementBox">
				<input type="checkbox" name="read-agree" id="agree">
				<label for="agree">查看并同意</label><span id="agreementTitle"></span>
			</div>
			<!-- <div class="weui-cell__bd">
				<input id="weuiAgree" name="weuiAgree" type="checkbox" >
				<em class="checkbox"></em>
				<span class="text" style="padding-left:3px">我已详细阅读并同意
					<a href="javascript:;" onclick="showAgreeInfo();">《网络医生服务协议》</a>
				</span>
			</div> -->
			<a href="javascript:;" class="weui-btn weui-btn_primary" style="color: #fff; margin-top: 100px;" onclick="newDoRegister()">注册</a>
		</div>
		
	<!--用户协议-->
	<div id="divAgreeInfo" class='weui-popup__container'>
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">
			<div class="weui-cells weui-cells_form" style="overflow:auto">
				<div class="weui-cell">
					<span id="argeeTitle"></span><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary close-popup" style="float: right;">关闭</a>
				</div>
				<div class="weui-cell">
					<div class="argeeContent">
						<span id="argeeContent"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../res/js/jsencrypt.js"></script>
	<script>
		var code,token;
		
		var agreementTitle = ''	//用户协议标题
		var countdown = 60;

		var userNotFound = true	//用户未注册

		// 获取验证码
		function dogetCode(){
			var params = { };
			$(".cd").addClass("disappear")
			$(".cd_pic").removeClass("disappear")
			newAjaxPost("/h5/captcha/captcha", params, dogetCodeOk);
		}
		function dogetCodeAgain(){
			var params = { };
			newAjaxPost("/h5/captcha/captcha", params, dogetCodeOk);
		}
		function dogetCodeOk(jsonInfo){
			console.log(jsonInfo)
			if(jsonInfo.code==1){
				var element = document.getElementById('codeImg');
				element.src = "data:image/png;base64," + jsonInfo.data.img;
				token = jsonInfo.data.cToken;
				code = jsonInfo.data.captcha;
			}else{
				msgInfo("获取失败");
			}
		}

		// 获取短信验证码
		function get_captcha() {
			strUserName = $("#txt_phone").val().trim();
			var myreg = /^1[3-9]\d{9}$/;
			if (!myreg.test(strUserName)) {
				msgInfo("请输入正确的手机号码！");
				return false;
			}  else if(!userNotFound) {
				msgInfo("账号已存在");
				return false;
			} else {
				let params = {
					"mobile": strUserName,
					"type": 1,
					isRegister: '1'
				}
				newAjaxPost("/h5/captcha/phoneCaptcha", params, get_captchaOk);
				return true;
			}
		}

		function get_captchaOk(jsonInfo) {
			if (jsonInfo.code == 1) {
				noClick()
				msgInfo("已发送短信验证码,请注意查收！");
			} else {
				msgInfo(jsonInfo.msg);
			}
		}
		
		function noClick() {
			if (countdown == 0) {
				$('#v_container').text('重新发送')
				$('#v_container').removeClass("notClickn")
				countdown = 60;
			} else {
				$('#v_container').text('重新发送(' + countdown + ')')
				$('#v_container').addClass("notClickn")
				countdown--;
				setTimeout(noClick, 1000)
			}
		}
		
		// 注册
		function newDoRegister() {
			var strUserName, strPhoneCode, strPassWord, strRePassWord;
			var myreg=/^1[3-9]\d{9}$/;
			strUserName = $("#txt_phone").val().trim();
			strPhoneCode = $("#phone_code").val().trim();
			strPassWord = $("#txt_paw").val().trim();
			strRePassWord = $("#txt_paw2").val().trim();
			// if (isSpace(strUserName)) {
			// 	msgInfo("手机号码不能为空！");
			// 	return false;
			// }
			if (!userNotFound) {
				msgInfo("账号已存在");
				return false;
			}
			if (!myreg.test(strUserName)) {
				msgInfo("请输入正确的手机号");
				return false;
			}
			if (isSpace(strPhoneCode)) {
				msgInfo("验证码不能为空！");
				return false;
			}
			if (isSpace(strPassWord)) {
				msgInfo("登录密码不能为空！");
				return false;
			}
			if(strPassWord.length < 6 || strPassWord.length > 20){
				msgInfo('请输入6-20位密码', 1200)
				return
			}
			if (isSpace(strRePassWord)) {
				msgInfo("确认密码不能为空！");
				return false;
			}
			if (strPassWord != strRePassWord) {
				msgInfo("两次输入的密码不一致，请重新输入");
				return false;
			}
			if(!$('#agree').is(':checked')){
				msgInfo(`请先勾选《${agreementTitle}》`)
				return
			}
			// if (code != strPhoneCode) {
			// 	msgInfo("手机验证码不一样！");
			// 	return false;
			// }
			// if ($("input[name='weuiAgree']:checked").length==0) {
			// 	msgInfo('请先了解并勾选协议');
			// 	return;
			// }
			var params = {
				"phoneCaptcha": strPhoneCode,
				// "chartToken": token,
				"confirmPassword": strRePassWord,
				"mobile": strUserName,
				"password": strPassWord,
				userType: 'P'
			};
			newAjaxPost("/h5/login/userRegister", params, newDoRegisterOk);
			return false;
		}
		function newDoRegisterOk(jsonInfo) {
			if (jsonInfo.code == 1){
				msgInfo("注册成功！");
				goPage("login.htm")
			}else
				msgInfo(jsonInfo.msg);
		}
		


		function showAgreeInfo() {
			doGetAgree();
			$("#divAgreeInfo").popup(); //打开
		}

		function doGetAgree() {
			if (isEmpty($("#argeeTitle").text())) {
				var paramJson = { "init_id": '102', "rand": Math.random() };
				ajaxPost("util_getUtilInitData", paramJson, doGetAgreeOk);
			}
			return false;
		}

		function doGetAgreeOk(jsonInfo) {
			$("#argeeTitle").text(jsonInfo.data.init_name);
			$("#argeeContent").html(jsonInfo.data.init_key);
		}

		function check() {
			strUserName = $("#txt_phone").val().trim();
			var myreg = /^1[3-9]\d{9}$/;
			if (strUserName.length == 11 && myreg.test(strUserName)) {
				let params = {
					"mobile": strUserName,
				}
				newAjaxPost("/h5/login/judgeUser", params, checkOk);
			}
		}

		function checkOk(jsonInfo) {
			if (jsonInfo.code == 1) {
				if (jsonInfo.data.list.includes(1)) {
					//已有用户
					msgInfo('账号已存在')
					userNotFound = false;
				}else{
					userNotFound = true
				}
			} else {
				msgInfo(jsonInfo.msg);
			}
		}

		getAgreement()
		$('#agreementTitle').on('click', function (e) {
			// if($(this).is(':checked')){
				savePassword()
				goPage('user_agreement.htm')
			// }
		})

		function getAgreement(){
			newAjaxPost('/h5/utilInitData/getAgreement', {id: 2}, function (res) {
				agreementTitle = res.data.initName
				$('#agreementTitle').text('《'+ agreementTitle +'》')
			})
		}

		function savePassword(){
			let pw = $("#txt_paw").val()
			let rePw = $("#txt_paw2").val()
			let phoneCode = $("#phone_code").val()
			if(pw){
				sessionStorage.setItem('regPw', pw)
			}
			if(rePw){
				sessionStorage.setItem('repeatRegPw', rePw)
			}
			if(phoneCode){
				sessionStorage.setItem('phoneCode', phoneCode)
			}
		}

		window.onpageshow = function (){
			// if($('#agree').is(':checked')){
				$("#txt_paw").val(sessionStorage.getItem('regPw') || '')
				$("#txt_paw2").val(sessionStorage.getItem('repeatRegPw') || '')
				
				sessionStorage.removeItem('regPw')
				sessionStorage.removeItem('repeatRegPw')

				setTimeout(() => {
					$("#phone_code").val(sessionStorage.getItem('phoneCode') || '')
					sessionStorage.removeItem('phoneCode')
				}, 10);
			// }
		}

		// 显示密码==================
		const hidePsw = ''
		const showPsw = '../res/images/1.9.1img/eye_icon.png'
		let showingPsw = [false, false]

		$(".togglePsw").prop('src', hidePsw).show().on('click', function(){
			let i = $(this).attr('data-index')
			showingPsw[i] = !showingPsw[i]

			showingPsw[i] ? $(this).prop('src', showPsw).addClass('eye-open').prev().prop('type', 'text')
				: $(this).prop('src', hidePsw).removeClass('eye-open').prev().prop('type', 'password')
		})
	</script>
</body>
</html>